labelとtext UI

Label ラベル UIと単なるテキストによるUI作りがちだが、それに対する議論

実際のデザインシステムから

form-group-header内にlabelを配置し、form-group-headerでlayoutスタイル、labelタグにfont-weightなど割当(GitHub Primer)

formLabelやlabelモジュールを用意して割当(Bootstrap, Chakra UI, polaris shopify)

inputとlabelを一緒に実装(Vuetify,Material UI)

何も当てない(Base uber)

自分が実装した例

偶にアクセスされているので自分の実装例書いておく。 Ref: cowcamo

https://i.gyazo.com/2fe499cc28d9b080cd112c48118d44b1.png

code:ex.html

電話番号

</label>

</div>

ポイント説明

labelとinputは、DOM的に階層構造でないので、forでつなげる。

構造とCSS

p-form__field

p-form__fieldTitle

labelタグには依存させないスタイル

画像の様に、タグ Tag uiが添付されることも多いので、Layout出来るようにclassがほしい。

input単体なら、labelタグを利用

radioUIといった、テキスト部分もヒットターゲットにしたい場合は、単なるspanにしたりする。

何かしらのinput用のDOM

上記の構造にして、input部分に何が来ても対応出来る形にしている。

https://i.gyazo.com/f732183f6c0fed8924dd2373da6dfd8b.png

legend htmlやfieldset htmlは、デザイン的に合わないし、ブラウザデフォルトのスタイルを消すのが何だかなぁと思ったので利用しなかった。

※ 実装は、railsのformなので、nameやidは自動で割り当てられるものを削りました。

参考